<template>
	<div class="page">
		<Head navTitle="活动大厅" />
		<div class="page-container activity-container">
			<el-row :gutter="22">
				<el-col :xs="24" :md="12">
					<div class="bs-panel ht-panel bs-activity-panel">
						<div class="infinite-list-wrapper">
							<ul class="actlist" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
								<li v-for="(item,index) in list" :key="index" @click="actClick(index)"
									class="act-cell flex-center">
									<div class="act-pic"><img :src="item.pic"></div>
									<div class="flex_bd">
										<div class="act-title ellipsis">免费赠送金币，你来就送噢！</div>
										<div class="act-desc line-2">
											活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介活动简介</div>
										<div class="act-time">申请结束时间：2021-09-10 22:00</div>
									</div>
								</li>
							</ul>
							<div class="load-more" v-if="loading"><i class="el-icon-loading"></i> 加载中...</div>
							<div class="load-more" v-if="noMore">没有更多了</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :md="12" class="el-col-nr-hide">
					<div class="bs-panel ht-panel">
						<div class="art-content">
							<div class="art-heading">
								<div class="art-title ">免费赠送金币，你来就送噢！</div>
								<div class="item-time">申请结束时间：2021-09-10 22:00</div>
							</div>
							<div class="art-body clearfix">
								<p>来就送10万体验金！</p>
								<p><img src="../../assets/images/lg.png"></p>
							</div>
							<div class="art-foot">
								<el-button type="success">申请shenqing</el-button>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import Head from '@/components/Head.vue'
	export default {
		components: {
			Head
		},
		data() {
			return {
				list: [{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/ac1.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/ac2.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/ac3.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/ac4.png'),
					},
				],
				count: 6,
				loading: false,
				windowWidth: document.documentElement.clientWidth
			}
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
		},
		watch: {
			
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.list.push(this.list.length + 1);
					}
					this.loading = false
				}, 1000)
			},
			actClick(val) {
				let that = this;
				console.log("实时屏幕宽度：", val, that.windowWidth);
				if (that.windowWidth<1000) {
					this.$router.push('/activityDetail');
				} else{
					alert(val)
				}
			}
		}
	}
</script>
